<template>
  <div>
    <el-cascader :props="props" :value="value" v-bind="$attrs" v-on="$listeners" @change="handleChange" />
  </div>
</template>

<script>
import Axios from 'axios'
export default {
  props: {
    value: {
      type: Array,
      require: false,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      props: {
        lazy: true,
        lazyLoad: async(node, resolve) => { // 需要改成箭头函数 改变this指向
          let nodes
          if (node.level === 0) {
            nodes = await this.getProvince()
            nodes = nodes.map(item => {
              let leaf = false
              if (item.proId === '810000' || item.proId === '820000' || item.proId === '710000') {
                leaf = true
              }
              return {
                label: item.proName,
                value: item.proId,
                leaf
              }
            })
            // console.log(nodes)
          }
          if (node.level === 1) {
            nodes = await this.getCity(node.value)
            nodes = nodes.map(item => {
              return {
                label: item.cityName,
                value: item.cityId
              }
            })
          }
          if (node.level === 2) {
            nodes = await this.getArea(node.value)
            nodes = nodes.map(item => {
              return {
                label: item.areaName,
                value: item.areaId,
                leaf: true
              }
            })
          }
          resolve(nodes)
        }
      }
    }
  },
  methods: {
    async getProvince() {
      const { data: { list }} = await Axios('http://123.57.109.30:3999/api/provincesList')
      //   console.log(list)
      return list // return list用来map便利
    },
    async getCity(proId) {
      const { data: { list }} = await Axios('http://123.57.109.30:3999/api/cityList', {
        params: {
          proId
        }})
      //   console.log(list)
      return list
    },
    async getArea(cityId) {
      const { data: { list }} = await Axios('http://123.57.109.30:3999/api/areaList', {
        params: {
          cityId
        }})
      // console.log(list)
      return list
    },
    // 用语法糖就可以不用这个
    handleChange(e) {
      this.$emit('input', e)
    }
  }
}
</script>

<style>

</style>
